import React from 'react';
import {  Button, Table, Space ,Modal,TreeSelect ,Form ,Input  ,Radio } from 'antd';
import {  ReloadOutlined  , SearchOutlined ,AppstoreOutlined  } from '@ant-design/icons';
import './css/Kehuguanli.css'
import axios from 'axios';
import {SEARCH_CUSTOMER,UPDATE_CUSTOMER} from '../../utils/api'
import {values} from "mobx";
// 下拉菜单的选项
const { TreeNode } = TreeSelect;
// 分页
const pageNum={
    pageSize:4
};
// 表单
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

// 多选框
class Kehuguanli extends React.Component {
    formRef=React.createRef();
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            closable: true,
            tableData: '',
            emailValue:'',
            phoneValue:'',
            stateValue:'',
            value:'',
            setValue:'',
            formData:[],
            user_name:'',
            user_email:'',
            user_id:'',
            user_iphone:'',
            user_pwd:'',
            user_status_id:'',
            user_role_id:'',
            role_id:'',
            mode:1
        }
    };
    handleOk = e => {
        this.setState({
            mode:1,
        });
        console.log('Ok')
    };
    handleCancel = e => {
        this.setState({
            mode:1,
        });
        console.log('cancel')
    };
    onFinish = values => {
        console.log( values);
        axios({
            url: UPDATE_CUSTOMER,
            method: 'post',
            data: {
                user_name : values.name,
                user_email :values.email,
                user_iphone :values.iphone,
                user_pwd :values.pwd,
                user_status_id:values.status,
                role_id:values.role,
                userId:values.user_id
            }
        }).then(data => {
            console.log(data)

            });
    };
     onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            setValue:(e.target.value)
        })
    };
    // 点击查询的按钮
    search = () => {
        axios({
            url:SEARCH_CUSTOMER,
            method:'get',
            params: {
                emailValue: this.state.emailValue,
                phoneValue: this.state.phoneValue,
                stateValue:this.state.stateValue,
            }
        }).then(data=>{
            if(data.data.code===200){
                this.setState({
                    tableData:data.data.data
                })
            }else{
                this.$message.error('错了哦，没有该客户')
            }
        })
    }
    // 点击重置的按钮
    reset = () => {
        console.log('这是重置的按钮')
        axios({
            url:SEARCH_CUSTOMER,
            method:'get',
            params:{}
        }).then(data=>{
            console.log(data)
            if (this.mounted){
                this.setState({
                    tableData:data.data.data
                })
            }

        })
    }
    // 点击修改的按钮
    updateBtn (row) {
        this.setState({
            mode:2,
            formData:row
        })
        console.log(this.state.formData)
    }
    // 查询所有的客户信息
    componentDidMount() {
         this.mounted=true
         axios({
             url:SEARCH_CUSTOMER,
             method:'get',
             params:{}
         }).then(data=>{
             console.log(data)
             if (this.mounted){
                 this.setState({
                     tableData:data.data.data
                 })
             }

         })
    }
    componentWillUnmount() {
         this.mounted=false
    }
    // 查询的输入框的双向绑定
    shuruchange = (name) => (e) => {
        this.shuruonchange(name,e.target.value)
    }
    shuruonchange = (name,val) => {
        this.setState({
            [name]:val
        })
    }
    shuruzhuangtai=(name)=>(val)=>{
        this.shuruonchange(name,val)
        console.log(val)
    }
    render() {
        const formData= this.state.formData
        // 表格的列名
        const columns = [
            {
                title: '序号',
                dataIndex: 'user_id',
                key:'user_id',
                align: 'center'
            },
            {
                title: '姓名',
                dataIndex: 'user_name',
                key:'user_name',
                align: 'center'
            },
            {
                title: '账号',
                dataIndex: 'user_wechat_account',
                key:'user_wechat_account',
                align: 'center'
            },
            {
                title: '邮箱',
                dataIndex: 'user_email',
                key:'user_email',
                align: 'center'
            },
            {
                title: '手机',
                dataIndex: 'user_iphone',
                key:'user_iphone',
                align: 'center'
            },
            {
                title: '角色',
                dataIndex: 'role_name',
                key:'role_name',
                align: 'center'
            },
            {
                title: '状态',
                dataIndex: 'user_status_name',
                key:'user_status_name',
                align: 'center'
            },
            {
                title: '操作',
                align: 'center',
                render: (row) =>
                    <div>
                        <Button  type="primary" onClick={this.updateBtn.bind(this,row)} >修改</Button>
                    </div>
            },
        ];
        // 对话框
        const mymode = <Modal
            title="修改用户信息"
            visible={true}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
        >
            <Form
                {...layout}
                name="修改用户信息"
                initialValues={{
                    userId:formData.user_id,
                    name: formData.user_name,
                    email:formData.user_email,
                    iphone:formData.user_iphone,
                    pwd:formData.user_pwd,
                    status:formData.user_status_id,
                    role:formData.role_id
                }}
                // 点击submit之后成功回调
                onFinish={this.onFinish}
                // 点击submit之后失败回调
                onFinishFailed={this.onFinishFailed}>
                <Form.Item
                    label="序号"
                    name='userId'
                    value="1"
                >
                    <Input  disabled  />
                </Form.Item>
                <Form.Item
                    label="姓名"
                    name='name'
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="邮箱"
                    name='email'
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="手机"
                    name='iphone'
                >
                    <Input />
                </Form.Item>

                <Form.Item className='mypassword'
                           label="密码"
                           name='pwd'
                >
                    <Input />
                </Form.Item>

                <Form.Item className='selectRadio'
                           label="状态"
                           name="status"
                >
                    <Radio.Group onChange={this.onChange} value={this.state.value} className='radioGroup'>
                        <Radio value={1}>启用</Radio>
                        <Radio value={2}>禁用</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item className='selectRadio'
                           label="角色"
                           name='role'>
                    <Radio.Group onChange={this.onChange} value={this.state.value} className='radioGroup'>
                        <Radio value={1}>运营者</Radio>
                        <Radio value={2}>商家</Radio>
                        <Radio value={3}>客户</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType='submit' className='mysubmit'>
                        提交
                    </Button>
                    <Button type="danger" className='mycancel'>
                        取消
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
        return (
            <div className='content'>
                <div id="myinput">
                    <label htmlFor="">
                        邮箱<input className='input' onChange={this.shuruchange('emailValue')} value={this.state.emailValue} type="text"/>
                        手机<input className='input' onChange={this.shuruchange('phoneValue')} value={this.state.phoneValue}  type="text"/>
                    </label>
                      状态
                        <TreeSelect className='selectInput'
                            onChange={this.shuruzhuangtai('stateValue')}
                            showSearch
                            style={{ width: '200px' ,marginLeft:'10px',backgroundColor:'white'}}
                            value={this.state.value}
                            dropdownStyle={{ maxHeight: '200px' ,overflow: 'auto'}}
                            placeholder="请选择状态"
                            allowClear
                            treeDefaultExpandAll
                        >
                                <TreeNode value="启用" title="启用" />
                                <TreeNode  value="禁止" title="禁止" />
                        </TreeSelect>
                       <Button className='mybtn' type="danger"  onClick={this.search} icon={<SearchOutlined />}>
                           查询
                       </Button>
                       <Button className='mybtn1' type="primary" onClick={this.reset} icon={<ReloadOutlined />}  >
                           重置
                       </Button>
                </div>
                    <Table  columns={columns} pagination={pageNum} dataSource={this.state.tableData} rowKey={(record)=>`complete${record.user_id}`}  />

                    {this.state.mode===2 && mymode}

            </div>
        )
    }
}

export default Kehuguanli